<template>
  <div class="stepOut" :class="$store.getters.windowWidth <= 1024 ? 'stepOutSmall' : ''">
    <ul style="padding-top: 50px;">
      <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index" :class="[
          $store.getters.windowWidth <= 1024
            ? Math.floor(index / 3) % 2 == 0
              ? 'stepItemLeftStart'
              : 'stepItemBrother'
            : Math.floor(index / 6) % 2 == 0
            ? 'stepItemLeftStart'
            : 'stepItemBrother',
          stepInfo.step == index ? 'stepItemProgress' : '',
        ]">
        <!-- 模拟步骤条的节点，此处为数值，如果是完成的步骤则为对勾 Object.prototype.toString.call-->
        <div :class="stepInfo.step >= index + 1 ? 'icon active' : 'icon'">
          {{ stepInfo.step >= index + 1 ? "" : index + 1 }}
        </div>
        <span class="pos-ab" style="font-size: 12px;">{{stepItem.nodeCapacityState === '1' ? '默认' :'自定义'}}</span>
        <!-- 模拟步骤条连接线，动态显示 一行最多展示6个，如果超过六个，连线则为圆弧状，如果是1024尺寸，则一行最多展示为3个
          如果此步骤能不能整除6/3或者此步骤index+1除以6/3的余数可以整除2的话，显示之前（前提：当从左往右的时，判断当前步骤的索引是否大于步骤的长度来决定显示，当为从右往左时，则判断当前索引是否大于步骤的长度来决定显示） -->
        <div v-if="
            $store.getters.windowWidth <= 1024
              ? (index + 1) % 3 != 0 || ((index + 1) / 3) % 2 == 0
              : (index + 1) % 6 != 0 || ((index + 1) / 6) % 2 == 0
          " :class="
            $store.getters.windowWidth <= 1024
              ? Math.floor(index / 3) % 2 == 0
                ? stepInfo.step >= index + 2
                  ? 'line lineActive'
                  : 'line'
                : stepInfo.step >= index + 1
                ? 'line lineActive'
                : 'line'
              : Math.floor(index / 6) % 2 == 0
              ? stepInfo.step >= index + 2
                ? 'line lineActive'
                : 'line'
              : stepInfo.step >= index + 1
              ? 'line lineActive'
              : 'line'
          " v-show="
            $store.getters.windowWidth <= 1024
              ? Math.floor(index / 3) % 2 == 0
                ? index + 1 !== stepInfo.list.length
                : index !== stepInfo.list.length
              : Math.floor(index / 6) % 2 == 0
              ? index + 1 !== stepInfo.list.length
              : index !== stepInfo.list.length
          "></div>
        <!-- 圆弧线
          如果可以整除6/3则为当前行的最后一个，显示为弧线 -->
        <div v-if="
            $store.getters.windowWidth <= 1024
              ? index != 0 && (index + 1) % 3 == 0
              : index != 0 && (index + 1) % 6 == 0
          " :class="[
            stepInfo.step >= index + 2
              ? 'lineCircle lineCircleActive'
              : 'lineCircle',
            $store.getters.windowWidth <= 1024
              ? ((index + 1) / 3) % 2 == 0
                ? 'lineCircleLeft'
                : ''
              : ((index + 1) / 6) % 2 == 0
              ? 'lineCircleLeft'
              : '',
          ]" v-show="index + 1 !== stepInfo.list.length"></div>

        <!-- 步骤名称  -->
        <p class="stepStatus">流程{{ index + 1 }}</p>
        <!-- 步骤描述  -->
        <p class="statusTime">{{ stepItem.nodeName }}</p>
      </li>
      <li class="stepItem" v-if="showPlusIcon">
       <span style="cursor: pointer;" @click="customClick()"> <i class="el-icon-plus"></i>添加</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "steps",
    props: {
      // 传递步骤参数
      stepInfo: {
        type: Object,
        default: function() {
          return {
            list: [],
            step: 0,
          };
        },
      },
      showPlusIcon:{
        type:Boolean,
        default:false,
      }
    },
    methods:{
      customClick() {
         this.$emit('addNode')
      }
    },
    mounted() {
    },
  }
</script>
<style lang="scss" scoped>
  li {
    list-style: none;
  }
  .pos-ab{
    position: absolute;
    top: -24px;
    right: 0;
  }
  @function vw($px) {
    // 进行计算操作
    $result: ($px / 2);
    $factor: 100000;
    $roundedValue: round($result * $factor);
    $roundedResult: $roundedValue / $factor;

    @return #{$result}px;

  }

  @function calc_vw($px) {
    @return calc(100% - ($px/$designWidth) * 100vw);
  }

  //px转为vh的函数

  @function vh($px) {
    $result: ($px / 2);
    $factor: 100000;
    $roundedValue: round($result * $factor);
    $roundedResult: $roundedValue / $factor;
    @return #{$result}px;
  }
  ul,li{
    padding: 0;
    margin: 0;
  }
  li{
    // border: 1px solid #ccc;
  }
  .stepOut {
    width: 100%;
    height: vh(100 * 2);
    height: auto;
    display: flex;
    justify-content: center;

    &.stepOutSmall {
      height: min_vh(100 * 2);
    }
    .stepItem {
      width: vw(124 * 2);
      height: vh(150 * 2);
      float: left;
      font-family: "PingFangSC-Regular";
      font-size: vw(14 * 2);
      text-align: center;
      position: relative;
      .lineCircle {
        left: 54%;
        top: vh(12 * 2);
        position: absolute;
        display: block;
        border-left-color: white;
        border-left-width: 0px;
        width: 51%;
        border-color: white white white white;
        border-left-style: hidden;
        border-left: none;
        border-top: vh(2 * 2) solid #c0c4cc;
        border-right: vh(2 * 2) solid #c0c4cc;
        border-bottom: vh(2 * 2) solid #c0c4cc;
        border-bottom: vh(2 * 2) solid #c0c4cc;
        border-left: 0px solid #c0c4cc;
        height: 101%;
        border-radius: 0px vw(25 * 2) vw(25 * 2) 0px;
      }
      // 一行几个呢？？？
      &:nth-child(n + 6) {
        float: right !important;
        right: 2%;
      }

      &.stepItemLeftStart {
        float: left !important;
        right: 0;

        +.stepItemBrother {
          .line {
            display: none;
          }
        }
      }

      &.stepItemProgress {
        .icon {
          border: vh(2 * 2) solid rgb(48, 49, 51);
          color: rgb(48, 49, 51);
        }

        .stepStatus {
          color: #333;
        }

        .statusTime {
          color: #333;
          opacity: 0.8;
        }
      }

      .lineCircleActive {
        border-bottom: vh(2 * 2) solid #007cdb;
        border-top: vh(2 * 2) solid #007cdb;
        border-right: vh(2 * 2) solid #007cdb;
        border-left: 0px solid #007cdb;
      }

      .lineCircleLeft {
        left: 5%;
        // width: 41%;
        width: 60px;
        border-top: vh(2 * 2) solid #c0c4cc;
        border-right: 0 solid #c0c4cc;
        border-bottom: vh(2 * 2) solid #c0c4cc;
        border-bottom: vh(2 * 2) solid #c0c4cc;
        border-left: vh(2 * 2) solid #c0c4cc;
        border-radius: vw(25 * 2) 0px 0px vw(25 * 2);

        &.lineCircleActive {
          border-bottom: vh(2 * 2) solid #007cdb;
          border-top: vh(2 * 2) solid #007cdb;
          border-right: 0 solid #007cdb;
          border-left: vh(2 * 2) solid #007cdb;
        }
      }

      .icon {
        width: vw(24 * 2);
        height: vw(24 * 2);
        border-radius: 50%;
        border: vh(2 * 2) solid #c0c4cc;
        margin: 0 auto;
        position: relative;
        z-index: 888;
        color: rgb(192, 196, 204);
      }

      .active {
        border: vh(2 * 2) solid #007cdb;
        color: #007cdb;

        &::after {
          content: "";
          // background: url("~@/assets/img/rightCheck.png");
          width: vw(22 * 2);
          height: vw(22 * 2);
          background-size: contain;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
        }
      }

      .line {
        position: absolute;
        top: vh(12 * 2);
        left: 52.5%;
        border-bottom: vh(2 * 2) solid #c0c4cc;
        width: vw(126 * 2);
        z-index: 111;
      }

      .lineActive {
        border-bottom: vh(2 * 2) solid #007cdb;
      }

      .stepStatus {
        color: rgba(87, 87, 87, 1);
        line-height: vh(36 * 2);
      }

      .statusTime {
        color: rgba(87, 87, 87, 1);
        opacity: 0.5;
      }
    }
  }
</style>
